<template>
  <div class="CeremonyHall h100" v-loading="loading">
    <div class="PageContent">
      <el-form
        :model="ruleForm"
        :inline="true"
        ref="ruleForm"
        label-width="120px"
        class="PageItem margintop20"
      >
        <el-row :gutter="5" class="fileSearch">
          <el-form-item label="火化开始日期:">
            <el-date-picker
              type="date"
              placeholder="选择时间"
              v-model="ruleForm.appointmentStartDate"
              format="yyyy-MM-dd"
            ></el-date-picker>-
            <el-date-picker
              type="date"
              placeholder="选择时间"
              v-model="ruleForm.appointmentEndDate"
              format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="区域:" prop="areaCode">
            <el-select
              v-model="ruleForm.areaCode"
              onkeydown="return (event.keyCode!=8)"
              placeholder="请选择"
            >
              <el-option label="全部" value></el-option>
              <el-option label="外地" :value="-1"></el-option>
              <el-option
                v-for="item in dictionary"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              v-if="btnRight.btnRemainsCremationTypeSearch"
              @click="onSubmit('search')"
            >查询</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button
              type="primary"
              plain
              v-if="btnRight.btnRemainsCremationTypeExport"
              @click="openExecl"
            >导出Excel</el-button>

          </el-form-item>
        </el-row>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight"
        >
          <el-table-column prop="areaName" align="center" label="行政区划名称" width="200"></el-table-column>
          <el-table-column prop="shizhe" align="center" label="逝者（含尸骨）" width="200"></el-table-column>
          <el-table-column prop="wumingshi" align="center" label="无名尸（含尸骨）" width="150"></el-table-column>
          <el-table-column prop="flygysanwu" align="center" label="福利院供养的三无对象" width="120"></el-table-column>
          <el-table-column prop="flyfygucan" align="center" label="福利院抚养的孤残儿童" width="120"></el-table-column>
          <el-table-column prop="xyjunren" align="center" label="现役军人" width="120"></el-table-column>
          <el-table-column prop="zybaowaijy" align="center" label="在押人员、保外就医人员" width="120"></el-table-column>
          <el-table-column prop="yybiaoben" align="center" label="医院标本" width="120"></el-table-column>
          <el-table-column prop="yyzaochaner" align="center" label="医院早产儿" width="120"></el-table-column>
          <el-table-column prop="dsycanzhi" align="center" label="当事人（残肢）" width="120"></el-table-column>
          <el-table-column prop="huaqiao" align="center" label="华侨" width="120"></el-table-column>
          <el-table-column prop="sums" align="center" label="总数" width="150"></el-table-column>
        </el-table>
        <div style="text-align: center;
                    height: 0px;
                    line-height: 20px;
                    font-size: 18px;">
          显示{{pager.total===0?0:(Math.ceil(pager.total/pager.pageSize)>1?((pager.currentPage-1)*pager.pageSize+1):(1))}}到{{pager.total===0?0:((Math.ceil(pager.total/pager.pageSize)===pager.currentPage)?(pager.total):(pager.currentPage*pager.pageSize))}}条
        </div>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            background
            layout="total,sizes,prev, pager, next, jumper"
            :total="pager.total"
          ></el-pagination>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
import { dataFormatetmd } from "@/utils/index";
import * as Type from "@/api/service";
import download from "@/api/download";
import { provinceCityCounty } from "@/utils/provinceCityCounty";
export default {
  name: "Exeption",
  data() {
    return {
      loading: false,

      type: [],
      ruleForm: {
        areaCode: "", //区域编码
        appointmentStartDate: "",
        appointmentEndDate: "",
        deadName: "",
        certificateNo: "",
        exemptionTypeCode: "",
        pageSize: 0,
        currentPage: 0,
        exportExcelFlag: 0,
      },
      pager: {
        pageSize: 20,
        total: 1,
        currentPage: 1,
      },
      tableData: [],
      dictionary: [],
      tableHeight: 0,
      //按钮权限
      btnRight: {
        btnRemainsCremationTypeSearch: true, //查询
        btnRemainsCremationTypeExport: true, //导出excel
      },
    };
  }, //载入按钮
  mounted() {
    this.btnRight = this.$route.meta.buttons;
    //遍历属性赋值将true与false字符串转换成布尔型的值
    for (var key of Object.keys(this.btnRight)) {
      this.btnRight[key] =
        this.btnRight[key] || this.btnRight[key] == "true" ? true : false;
    }

    console.log(provinceCityCounty);
    this.dictionary = provinceCityCounty
      .find((item) => item.label === "山东省")
      .children.find((item) => item.label === "临沂市").children;

    console.log(this.dictionary);

    this.defaultValue();
    this.onSubmit();
    var that = this;
    window.onresize = function () {
      var search = document.getElementsByClassName("fileSearch")[0]
        .offsetHeight;
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
      that.tableHeight = dom - search - 110;
    };

    //注销window.onresize事件
    this.$once("hook:beforeDestroy", () => {
      window.onresize = null;
    });
  },

  updated() {
    this.$nextTick(() => {
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
      var search = document.getElementsByClassName("fileSearch")[0]
        .offsetHeight;
      this.tableHeight = dom - search - 110;
    });
  },
  methods: {
    //默认初始值方法
    defaultValue() {
      //默认查询开始结束时间为当天
      this.ruleForm.appointmentStartDate = dataFormatetmd(new Date());
      this.ruleForm.appointmentEndDate = dataFormatetmd(new Date());
    },
    resetForm(formName) {
      this.ruleForm.appointmentStartDate = this.ruleForm.appointmentEndDate =
        "";
      this.$refs[formName].resetFields();

      this.onSubmit();
    },
    onSubmit(value) {
      this.loading = true;
      if (value) {
        this.pager.currentPage = 1;
      }

      // console.log(...this.ruleForm)
      var postData = {
        appointmentStartDate: dataFormatetmd(
          new Date(this.ruleForm.appointmentStartDate)
        ),
        appointmentEndDate: dataFormatetmd(
          new Date(this.ruleForm.appointmentEndDate)
        ),
        areaCode: this.ruleForm.areaCode,
        // ...this.ruleForm,

        pageSize: this.pager.pageSize,
        currentPage: this.pager.currentPage,
        exportExcelFlag: 0, //表示显示 1表示导出execl
      };
      //查询接口
      Type["loadRemainsCremationType"](postData)
        .then((response) => {
          const { data } = response;
          if (!data) {
            this.loading = false;
            this.$message("数据读取失败");
            return;
          }
          this.tableData = data.list;
          this.pager = data.pager;
          this.loading = false;
          //   //数据读取成功
        })
        .catch((error) => {
          this.$message(error);
          this.loading = false;
          this.tableData = [];
        });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pager.pageSize = size;
      this.onSubmit();
    },
    handleCurrentChange: function (currentPage) {
      this.pager.currentPage = currentPage;
      this.onSubmit(); //点击第几页
    },
    openExecl() {
      // window.location.href = "excel地址"
      var postData = {
        appointmentStartDate: dataFormatetmd(
          new Date(this.ruleForm.appointmentStartDate)
        ),
        appointmentEndDate: dataFormatetmd(
          new Date(this.ruleForm.appointmentEndDate)
        ),
        areaCode: this.ruleForm.areaCode,

        pageSize: this.pager.pageSize,
        currentPage: this.pager.currentPage,
        exportExcelFlag: 1, //表示显示 1表示导出execl
      };
      // 查询接口
      download.exportExcel(
        Type["LoadRemainsCremationTypeExportExcel"],
        postData,
        "遗体火化类型统计_" + download.getDateTime() + ".xlsx"
      );
    },
  },
};
</script>

<style scoped>
.w150 {
  width: 150px;
}
</style>
